{:W('Cate/header')}
{:W('Cate/left')}
<!--内容部分-->
    <div class="content">
        <div class="title">
            <p>用户管理</p>
            <i class="icon-angle-right"></i>
            <p class="active">用户列表</p>
        </div>
        <div class="admin_list clearfix">
            <div class="main">
                <div class="main_title">
                    <form action="{:U('user_list/user_list')}" method="get">
                        <ul class="clearfix">
                            <li>
                                <span>账号</span>
                                <input value="{$param.username}" maxlength="20" name="username" type="text" >
                            </li>
                            <li>
                                <span>手机号</span>
                                <input value="{$param.tel}" maxlength="11" name="tel" type="text" >
                            </li>
                            <button type="submit"><img src="__PUBLIC__/images/seach.png">搜索</button>
                        </ul>
                    </form>
                </div>
                <div class="main_list">
                    <div class="main_list_new">
                        <button id="add_user"><img src="__PUBLIC__/images/add_j.png">新增</button>
                    </div>
                    <div class="main_list_list user_list">
                        <dl>
                            <dt>
                                <span style="width:5%">序号</span>
                                <span style="width:15%;text-align:left;padding-left:20px;">账号</span>
                                <span style="width:10%;text-align:left;padding-left:20px;">用户名</span>
                                <span style="width:10%">手机号</span>
                                <span style="width:10%;text-align:left;padding-left:20px;">所属组织</span>
                                <!--<span style="width:10%;text-align:left;padding-left:20px;">所属区域</span>-->
                                <span style="width:15%">邮箱</span>
                                <span style="width:5%">授权资源</span>
                                <span style="width:5%">是否在线</span>
                                <span style="width:25%">操作</span>
                            </dt>
                            <volist name="array['accounts']" id='row' key="k">
                                <dd>
                                    <span style="width:5%">{$k}</span>
                                    <span style="width:15%;text-align:left;padding-left:20px;">{$row['username']}</span>
                                    <span style="width:10%;text-align:left;padding-left:20px;">{$row['markname']}</span>
                                    <span style="width:10%">{$row['tel']}</span>
                                    <span style="width:10%;text-align:left;padding-left:20px;">{$row['dpmname']}</span>
                                    <!--<span style="width:10%;text-align:left;padding-left:20px;">{$row['areaname']}</span>-->
                                    <span style="width:15%">{$row['email']}</span>
                                    <span style="width:5%">{$row['resnum']}</span>
                                    <span style="width:5%">
                                    <if condition="$row['online'] eq 0">
                                        <i class="icon-circle lx"></i>离线
                                        <elseif condition="$row['online'] eq 1"/>
                                        <i class="icon-circle zx"></i>在线
                                    </if>
                                </span>
                                    <span style="width:25% ">
                                    <a href="{:U('UserList/user_list_xq',array('accountiddst'=>$row['id'],'username'=>$row['username'],'tel'=>$row['tel']))}">详情</a>
                                    <a class="cz" href="javascript:;" data-json='{$row|json_encode}'>重置密码</a>
                                    <a class="xg" href="javascript:;" data-json='{$row|json_encode}'>修改</a>
                                    <a href="javascript:;" onclick="del_user('{$row.id}','{$row.username}')">删除</a>
                                </span>
                                </dd>
                            </volist>
                        </dl>
                    </div>
                </div>
                <div class="fy" id="page"></div>
            </div>
        </div>
    </div>

    <!--弹框-->
    <!--添加子组织-->
    <div class="hk"></div>
    <div class="add_group add_user">
        <div class="add_group_title">
            <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">新增用户
        </div>
        <div class="add_group_center">
            <ul>
                <li>
                    <span>
                        <i></i>所属组织：
                    </span>
                    <img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">
                    <input value="" name="depid" class="yh_list" placeholder="请选择所属组织" readonly type="text">
                    <div class="list" style="overflow-y:scroll;max-height: 200px;">
                        <ul class="active"></ul>
                    </div>
                </li>
                <!--<if condition="$userrole eq '1'">-->
                <!--<li>-->
                    <!--<span>-->
                        <!--<i></i>所属区域：-->
                    <!--</span>-->
                    <!--<img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">-->
                    <!--<select name="areaid">-->
                        <!--<option value="">请选择所属区域</option>-->
                    <!--</select>-->
                <!--</li>-->
                <!--</if>-->
                <li>
                    <span>
                        <i>*</i>账号：
                    </span>
                    <input value="" maxlength="20" name="username" type="text">
                </li>
                <li>
                    <span>
                        <i></i>用户名：
                    </span>
                    <input value="" maxlength="20" name="markname" type="text">
                </li>
                <li>
                    <span>
                        <i>*</i>手机号：
                    </span>
                    <input value="" maxlength="11" name="tel" type="text">
                </li>
                <li>
                    <span>
                        <i></i>邮箱：
                    </span>
                    <input value="" name="email" type="text">
                </li>
                <li >
                <span>
                    <i>*</i>密码：
                </span>
                    <input value=""  name="passwd" maxlength="30" type="password">
                </li>
                <li>
                    <span>
                        <i>*</i>确认密码：
                    </span>
                    <input value=""  name="cpasswd" maxlength="30" type="password">
                </li>
            </ul>
        </div>
        <div class="add_group_btn" id="add_new_user">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div>
    <div class="add_group add_user2">
        <div class="add_group_title">
            <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">修改用户
        </div>
        <div class="add_group_center">
            <ul>
                <li>
                    <span>
                        <i></i>所属组织：
                    </span>
                    <img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">
                    <input value="" name="depid" class="yh_list" placeholder="请选择所属组织" readonly type="text">
                    <div class="list" style="overflow-y:scroll;max-height: 200px;">
                        <ul class="active"></ul>
                    </div>
                </li>
                <!--<if condition="$userrole eq '1'">-->
                <!--<li>-->
                    <!--<span>-->
                        <!--<i></i>所属区域：-->
                    <!--</span>-->
                    <!--<input value="" name="areaid" disabled type="text">-->
                <!--</li>-->
                <!--</if>-->
                <li>
                    <span>
                        <i>*</i>账号：
                    </span>
                    <input value="" maxlength="20"  name="username" disabled type="text">
                </li>
                <li>
                    <span>
                        <i></i>用户名：
                    </span>
                    <input value="" maxlength="20"  name="markname" type="text">
                </li>
                <li>
                    <span>
                        <i>*</i>手机号：
                    </span>
                    <input value="" maxlength="11" name="tel" type="text">
                </li>
                <li>
                    <span>
                        <i></i>邮箱：
                    </span>
                    <input value="" name="email" type="text">
                </li>
            </ul>
        </div>
        <div class="add_group_btn" id="edit_old_user">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div>
    <div class="add_group xg_user_password">
        <div class="add_group_title">
            <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">重置密码
        </div>
        <div class="add_group_center">
            <ul>
                <li>
                    <span>
                        <i>*</i>新密码：
                    </span>
                    <input value=""  name="passwd"  type="password">
                </li>
                <li>
                    <span>
                        <i>*</i>确认密码：
                    </span>
                    <input value="" name="cpasswd"  type="password">
                </li>
            </ul>
        </div>
        <div class="add_group_btn">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div>
</body>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'page'
            ,count: "<?php echo $totnum; ?>"
            ,limit: "<?php echo $pagecount; ?>"
            ,layout: ['prev', 'page', 'next', 'limit', 'skip']
            ,curr:function(){
                var page = location.search.match(/pageid=(\d+)/);
                return page ? page[1] : 1;
            }()
            ,jump: function(obj,first){  //点击页码出发的事件
                if(first!=true){  //是否首次进入页面
                    var username = "<?php echo $param['username']; ?>";
                    var tel = "<?php echo $param['tel']; ?>";
                    var _url = "/user_list/user_list?pageid="+obj.curr+"&pagecount="+obj.limit;
                    if(username || tel){
                        _url = "/user_list/user_list?pageid="+obj.curr+"&pagecount="+obj.limit+"&username="+username+"&tel="+tel;
                    }
                    window.location.href = _url;
                }
            }
        });
    });

    $(document).ready(function () {
        // 获取区域数据
        $.post("{:U('user_list/getArea_list')}",{},function(data){
            var _select = $('.add_user select[name="areaid"]');
            _select.empty();
            _select.append('<option value="">请选择所属区域</option>');
            for(var i in data.areas){
                var _area = '<option value="'+data.areas[i]['id']+'">'+data.areas[i]['name']+'</option>';
                _select.append(_area);
            }
        })

        //添加子组织
        getPopup($('#add_user'),$('.add_user'));

        //修改
        $('.main_list').find('.xg').each(function () {
            var _this = $(this);
            getPopup(_this,$('.add_user2'));
        });

        // 重置密码
        $('.main_list').find('.cz').each(function () {
            var _this = $(this);
            getPopup(_this,$('.xg_user_password'));
        });

        // 初始化用户顶级分组
        get_class(0);

        // 菜单单击事件，获取子菜单
        var timer = '';
        $('.list ul').on('click','.list_btn',function(){
            clearTimeout(timer);
            var _this = $(this);
            timer = setTimeout(function () {　  // 这里采用执行自定义事件的方式
                var obj = _this.parent('li').attr('data-departments');
                if(obj){
                    get_class(obj);  // 获取子菜单
                }
            }, 300); 　　// 延迟300ms执行单击事件
        })

        // 菜单双击事件，获取选中的组织，并收缩下拉框
        _depid = '';   // 下拉选择的部门id，全局
        $('.list ul').on('dblclick','.list_btn',function(ev){
            ev.stopPropagation();
            clearTimeout(timer);
            // 将选择的分组显示在输入框中
            $('.yh_list').val($(this).text());
            $('.yh_list').click();   // 收缩
            _depid = $(this).parent('li').attr('data-departments');
        })

        // 所属组织弹出区域显示隐藏
        $('.yh_list,.icon-sort-down').on('click',function () {
            var _this = $(this).parent().find('.list');
            if(_this.is(':hidden')){
                _this.show();
            }else{
                _this.hide();
            }
        });

        // 点击新增和修改按钮，所属组织弹出区域隐藏
        $('#add_user,.xg').on('click',function(){
            $('.list').hide();
        })

        // 新增用户
        $('.add_user button').eq(0).on('click',function(){
            var _conf = get_data('.add_user');
            if(!_conf){
                return false;
            }
            $.post("{:U('user_list/AddUser_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('新增用户成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 获取编辑用户信息
        $('.main_list').on('click','.xg,.cz',function(){
            var _json = $(this).attr('data-json');
            _json = JSON.parse(_json);
            if($(this).has('.xg')){
                var add_user2 = $('.add_user2');
                add_user2.find('input[name="depid"]').val(_json.dpmname);
                add_user2.find('input[name="username"]').val(_json.username);
                add_user2.find('input[name="markname"]').val(_json.markname);
                add_user2.find('input[name="tel"]').val(_json.tel);
                add_user2.find('input[name="email"]').val(_json.email);
                add_user2.find('input[name="areaid"]').val(_json.areaname);
            }
            _accountiddst = _json.id;   // 全局
            _depid = _json.dpmid;
        });

        // 编辑用户
        $('.add_user2 button').eq(0).on('click',function(){
            var _conf = get_data('.add_user2');
            if(!_conf){
                return false;
            }
            _conf['accountiddst'] = _accountiddst;   // 修改用户的id
            $.post("{:U('user_list/modifyUser_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('修改用户成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        });


        // 重置密码
        $('.xg_user_password button').eq(0).on('click',function(){
            var _passwd = $('.xg_user_password [name="passwd"]').val();
            var _cpasswd = $('.xg_user_password [name="cpasswd"]').val();
            // 验证密码
            var _checkPass = /^\w{6,18}$/;
            if(!_checkPass.test(_passwd)){
                layer.msg('密码由6-18位字母、数字、下划线组成',{icon:2,time:2000});
                return false;
            }
            // 密码一致性
            if(_cpasswd != _passwd){
                layer.msg('确认密码和新密码不一致',{icon:2,time:2000});
                return false;
            }
            $.post("{:U('client/ResetPswd_post')}",{'passwd':_passwd,'accountiddst':_accountiddst},function(data){
                if(data.result == '0'){
                    layer.msg('重置密码成功！',{icon:1,time:2000},function(){
                        close();
                    })
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        });

    });

    /*
     * 获取用户组分类
     * @param string|int obj 上级分类id，默认0
     **/
    function get_class(obj)
    {
        $.get("{:U('user_group/user_group_json')}",{parentid:obj},function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return false;
            }
            // 遍历分类
            var _parent = $('.list ul');
            var _child = $('li[data-departments="'+obj+'"]');
            if(obj == '0'){
                _parent.empty();
                _parent.append('<li data-departments=""><span class="list_btn">请选择所属组织</span></li>');
            } else {   // 菜单收展效果
                $('span.list_btn').removeAttr('style');   // 清楚所有背景颜色
                _child.find('span').attr('style','background:gray;');   // 给一个灰色的背景代表选中（颜色暂定）
                _child.find('ul').remove();
                var _style = '';  // 默认菜单展开
                if($.trim(_child.find('i').eq(0).attr('class')) == 'icon-caret-down'){
                    _child.find('i').eq(0).attr('class','icon-caret-right');
                    _style = 'display:none;';
                } else {
                    // 当前分类展开的时候，同级分类收缩并清除菜单下面的数据
                    _child.parent().find('i').attr('class','icon-caret-right');
                    _child.parent().find('ul').remove();
                    _child.find('i').eq(0).attr('class','icon-caret-down');
                    _style = 'display:block;';
                }
                _child.append('<ul style="'+_style+'"></ul>');
            }
            for(var i in data.departments){
                if(obj == '0'){   // 一级菜单
                    var _parentLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.departments[i]['departmentname']+'</span></li>';
                    _parent.append(_parentLi)
                } else {   // 子级菜单
                    var _childLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.departments[i]['departmentname']+'</span></li>';
                    _child.find('ul').append(_childLi)
                }
            }
            return true;
        })
    }

    // 删除用户
    function del_user(obj,name){
        if(obj == ''){
            layer.msg('参数错误',{icon:2,time:2000});
            return;
        }
        var _length = $('.user_list dd').length;
        layer.confirm('<font style="color: red;">*</font> 确认要删除'+name+'用户吗！',function(index){
            $.post("{:U('user_list/delUser_post')}",{'accountiddst':obj},function(data){
                if(data.result == '0'){
                    layer.msg('删除用户成功！',{icon:1,time:2000},function(){
                        var _layui_input = $('.layui-laypage-skip .layui-input');
                        if(_length <= 1 && _layui_input.val() > 1){   // 获取上一页
                            _layui_input.val(_layui_input.val()-1);
                            $('#page .layui-laypage-btn').click();
                        } else {   // 刷新当前页
                            location.reload();
                        }
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        });
    }

    // 获取数据
    function get_data(obj)
    {
        var _input = $(obj).find('input,select').not('[disabled]');
        var _conf = {};
        _input.each(function(i){
            if(_input.eq(i).attr('name') == 'depid'){
                _conf[_input.eq(i).attr('name')] = _depid;
            } else {
                _conf[_input.eq(i).attr('name')] = _input.eq(i).val();
            }
        })
        // 验证数据
        for(var i in _conf){   // 组织、区域、用户名非必填
            if(!$.trim(_conf[i]) && i != 'depid' && i != 'areaid' && i != 'markname' && i != 'email'){
                layer.msg('请把表单填写完整！',{icon:2,time:2000});
                return false;
            }
            if(i == 'username'){   // 账户限制
                var _checkName = /^[a-zA-Z0-9]{1,20}$/;
                if(!_checkName.test(_conf['username'])){
                    layer.msg('账号由1-20位的英文字母组成！',{icon:2,time:2000});
                    return false;
                }
            }
            if(i == 'tel'){   // 验证手机号
                var _check =  /^1\d{10}$/;
                if(!_check.test(_conf['tel'])){
                    layer.msg('手机号格式错误！',{icon:2,time:2000});
                    return false;
                }
            }
            if(i == 'email' && $.trim(_conf['email'])){   // 验证邮箱
                var _checkEmail =  /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if(!_checkEmail.test(_conf['email'])){
                    layer.msg('邮箱格式错误！',{icon:2,time:2000});
                    return false;
                }
            }
            // 密码验证
            if(i == 'passwd'){
                var _checkPass = /^\w{6,18}$/;
                if(!_checkPass.test(_conf['passwd'])){
                    layer.msg('密码由6-18位字母、数字、下划线组成！',{icon:2,time:2000});
                    return false;
                }
            }
            // 密码一致性验证
            if(i == 'cpasswd'){
                if(_conf['passwd'] != _conf['cpasswd']){
                    layer.msg('确认密码和密码不一致！',{icon:2,time:2000});
                    return false;
                }
            }
        }
        return _conf;
    }
</script>
</html>